<template>
	<div>
		<div class="outer">
			<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
				<a-form-item label="广告名称">
					<a-input v-model:value="formState.name" />
				</a-form-item>
				<a-form-item label="链接地址">
					<a-input v-model:value="formState.url" />
				</a-form-item>
				<a-form-item label="是否展示">
					<a-select v-model:value="formState.show">
						<a-select-option value="1">是</a-select-option>
						<a-select-option value="0">否</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="广告图片">
					<a-input v-model:value="formState.img_url" />
					<upLoadImg ref="upLoadImg" class="m-t-5" :imgUrls="imgUrl" :num='1' @updateImg="updateImg"></upLoadImg>
				</a-form-item>
				<a-form-item class="marginButton" :wrapper-col="{ span: 14, offset: 4 }">
					<a-button type="primary" @click="addSures">确定</a-button>
					<a-button style="margin-left: 10px" @click="delSures">取消</a-button>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>
<script>
	import upLoadImg from '../../../components/upImage.vue'
	import systemApi from '../../../api/system.js'

	export default {
		components: {
			upLoadImg
		},

		data() {
			return {
				ID: this.$route.query.changeId,
				imgUrl: [],
				numberData: '',
				formState: {
					ad_id: '',
					name: '',
					img_url: '',
					url: "",
					show: '1'
				},
				labelCol: {
					span: 2
				},
				wrapperCol: {
					span: 14
				},
			}
		},

		mounted() {
			if (this.$route.query.ids) {
				this.formState.ad_id = this.$route.query.ids
			}
			if (!this.formState.ad_id) {
				this.getGuangao()
			}
		},
		methods: {
			updateImg(e) {
				this.formState.img_url = String(e.url)
			},
			/*获取广告详情列表*/
			getGuangao() {
				systemApi.getAdInfo(this.ID).then((res) => {
					this.formState = res.result
					this.formState.show = String(this.formState.show)
					this.imgUrl = [{
						uid: res.result.id,
						url: res.result.img_url
					}]
					this.$refs.upLoadImg.getData(this.imgUrl)
				})
			},
			/*添加修改广告*/
			addSures() {
				systemApi.adOperation(this.formState).then((res) => {
					if (res.status === 1) {
						this.$router.go(-1)
					}
				})
			},
			/*取消修改添加*/
			delSures() {
				this.$router.go(-1)
			}
		}
	}
</script>
<style scoped>
	.outer {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ant-form {
		width: 100%;
	}

	.ant-span {
		padding: 5px;
		background-color: #F0AD4E;
		border-radius: 6px;
	}

	.ant-spanTwo[data-v-10f1d219] {
		display: inline-block;
		width: 80px;
		height: 28px;
		border-radius: 6px;
	}

	.photos img {
		width: 50px;
		height: 50px;
	}

	.marginButton {
		margin-left: -125px;
	}
</style>